$(function () {

  const $dtSpans = $('.tab .dt span')
  const $cards = $('.tab .card')

  $dtSpans.eq(0).addClass('active')
  $cards.eq(0).addClass('show')

  $dtSpans.click(function () {
    $(this).addClass('active')
      .siblings().removeClass('active')

    $cards.eq($(this).index()).addClass('show')
      .siblings().removeClass('show')
  })




  // $('.tab .dt span:eq(0)').css('background', 'red')
  // $('.tab .dt span:eq(0)').css('color', '#fff')
  // $('.tab .card:first').css('display', 'block')

  // $('.tab .dt span').click(function () {
    /*
    $(this).css({
      // 'background-color': 'red',
      backgroundColor: 'red',
      color: '#fff'
    }).siblings().css({
      'background-color': 'aqua',
      color: '#000'
    })

    let index = $(this).index()
    $('.tab .card').eq(index).css('display', 'block')
      .siblings().css('display', 'none')


    $(`.tab .card:eq(${index})`).css('display', 'block')
      .siblings().css('display', 'none')*/

    /*
    $(`.tab .card:eq(${index})`).css('display', 'block')
      .siblings('.card').css('display', 'none')*/

    // $(this).css('background', 'red').siblings().css('background', 'aqua')
    // $(this).css('color', '#fff').siblings().css('color', '#000')

    // $('.tab .dt span').css('background', 'aqua')
    // $(this).css('background', 'red')
    // $(this).siblings().css('background', 'aqua')

    // $(this).css('color', '#fff')
    // $(this).siblings().css('color', '#000')
  // })



})

